<template>
  <div class="roles">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-button type="primary"> 添加角色 </el-button>
      <!-- 表格 -->
      <el-table :data="roleList">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div class="expand_box">
              <!-- 一级权限 -->
              <el-row v-for="item1 in scope.row.children" :key="item1.id">
                <el-col :span="8">
                  <el-tag
                    type="primary"
                    closable
                    effect="dark"
                    @close="delRoleToRight(scope.row.id, item1.id)"
                    >{{ item1.authName }}</el-tag
                  >
                </el-col>

                <el-col :span="8">
                  <!-- 二级权限 -->
                  <el-row v-for="item2 in item1.children" :key="item2.id">
                    <el-col :span="12">
                      <el-tag
                        type="success"
                        closable
                        effect="dark"
                        @close="delRoleToRight(scope.row.id, item2.id)"
                        >{{ item2.authName }}</el-tag
                      >
                    </el-col>

                    <el-col :span="12">
                      <!--三级级权限 -->
                      <el-tag
                        type="warning"
                        v-for="item3 in item2.children"
                        :key="item3.id"
                        closable
                        effect="dark"
                        @close="delRoleToRight(scope.row.id, item3.id)"
                        >{{ item3.authName }}
                      </el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button size="mini" type="primary">编辑</el-button>
              <el-button size="mini" type="danger">删除</el-button>
              <el-button size="mini" type="warning" @click="allotBtn(scope.row)"
                >分配权限</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 树形控件 -->
    <!-- 1、data: 树形控件数据源
    2、show-checkbox:显示复选框
    3、node-key:指定每一个节点的唯一标识
    4、default-expanded-keys:指定默认展开那一节点，使用数组来配置要展开的id 列如：[2，3]
    5、default-expand-all ：展开下一级
    6、default-checked-keys：指定默认选中项，用数组来配置要展开的id列入：[2,3] 打勾✔
    7、props :配置tree控件子节点属性名和要显示的文本名称{children：'子节点属性名',label:'文本名称'}
     -->
    <el-dialog title="权限" :visible.sync="allotdialog" width="55%">
      <el-tree
        ref="treeRightsRef"
        :data="treeData"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="checkeArr"
        :props="defaultProps"
        :default-expand-all="true"
      >
      </el-tree>

      <span slot="footer" class="dialog-footer">
        <el-button @click="allotdialog = false">取 消</el-button>
        <el-button type="primary" @click="roleToRightOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "roles",
  data() {
    return {
      // 当前角色id
      currentRoleId: 0,
      //设置当前角色默认权限id对勾√
      checkeArr: [],
      //树形控件数据源
      treeData: [],
      //树形控件默认
      defaultProps: {
        children: "children",
        label: "authName",
      },
      //弹出分配权限对话框
      allotdialog: false,
      //角色列表数据
      roleList: [],
    };
  },
  computed: {},
  methods: {
    //角色列表数据
    async getRolesList() {
      const res = await this.$http.getRolesApi();
      console.log(res, "角色列表");
      this.roleList = res;
    },
    //删除角色指定权限
    async delRoleToRight(roleId, rightId) {
      // console.log(roleId, "角色Id");
      // console.log(rightId, "权限Id");
      const res = await this.$http.delRolesToRightApi(roleId, rightId);
      console.log(res, "删除角色指定权限");
      this.getRolesList();
    },
    //弹出分配权限对话框
    async allotBtn(row) {
      //获取当前角色id
      this.currentRoleId = row.id;
      this.allotdialog = true;
      //树形控状数据tree
      const res = await this.$http.getRightsApi("tree");

      //调用获取当前角色默认权限递归方法实现？？
      this.getCheckdArr(row, this.checkeArr);
      console.log("已经获取到当前角色所有最后一层的权限id数组", this.checkeArr);
      console.log(res, "tree数据");
      this.treeData = res;
    },
    //递归获取当前用户权限id数组
    getCheckdArr(row, checkeArr) {
      //如果没有下一层children,就把row里的id赋值push到checkeArr中
      if (!row.children) {
        return checkeArr.push(row.id);
      }

      //如果有children下一层，继续递归调用本身
      row.children.forEach((item) => {
        this.getCheckdArr(item, checkeArr);
      });
    },
    //点击确定按钮将最新角色权限
    async roleToRightOk() {
      //1.拿到当前角色id
      const roleId = this.currentRoleId;
      //2.全选中id,    getCheckedKeys
      const allcheckKeyArr = this.$refs.treeRightsRef.getCheckedKeys();
      //3.半选中的权限id,   getHalfCheckedNodes
      const halfChecjkedArr = this.$refs.treeRightsRef.getHalfCheckedNodes();
      //4.合并全选中，半选中的id组成
      const mergeCheckedStr = [...allcheckKeyArr, ...halfChecjkedArr].join(",");
      //5.调用更新权限接口
      await this.$http.updateRightsToRoleApi(roleId, mergeCheckedStr);
      //6.隐藏对话框
      this.allotdialog = false;
      //7.更新角色列表
      this.getRolesList();
    },
  },
  mounted() {},
  created() {
    this.getRolesList();
  },
};
</script>
<style scoped lang="scss">
.expand_box {
  padding: 10px 14px;
}
</style>
